<template>
    <h1>事件简写</h1>
    <button @click="f1">按钮1</button>
    <button @click="f1()">按钮1-1</button>
    <button @click="f2(34)">按钮2</button>
    <hr>
    <button @dblclick="f2('双击')">按钮3</button>
    <hr>
    <h1 class="c1">样式修改 - 金科</h1>
    <h2 @click="f100">事件对象</h2>
    <h2 @click="f100()">事件对象-没了</h2>
    <h2 @click="f100($event)">事件对象-加上</h2>
    <hr>
    <h1>动态属性</h1>
    <!-- dom中修改ref变量，省略value -->
    <h2 v-bind:title="author" @click="author='高鹗'">红楼梦</h2>
</template>

<script setup>
import { ref } from 'vue';

function f1(){
    console.log(111);
}

function f2(a){
    console.log('a',a);
}
//event
function f100(e){
    console.log('e',e);
}
console.log('=====');
let author = ref('曹雪芹1');
</script>

<style scoped>
.c1{background-color: pink;}
</style>